<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>动态轨迹</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="mapv,proj4" src="./static/libs/include-cesium-local.js"></script>
  <!--引用示例页面样式表-->
  <link rel="stylesheet" href="./static/demo/cesium/style.css" />
</head>

<body>
  <div id="GlobeView"></div>
  <script>
    var webGlobe = new Cesium.WebSceneControl("GlobeView", {
      terrainExaggeration: 1,
    });
    var blueImage = new Cesium.UrlTemplateImageryProvider({
      url:
        "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      maximumLevel: 12,
    });
    webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);
    var map = webGlobe.viewer;

    initMap();
    initMapv();

    function initMap() {
      var center = Cesium.Cartesian3.fromDegrees(114, 30, 5000000.0);
      map.scene.camera.setView({
        destination: center,
      });
    }

    function initMapv() {
      $.get("./static/data/mapv/wuhan-car.txt", function (rs) {
        var data = [];
        var timeData = [];
        rs = rs.split("\n");
        var maxLength = 0;
        for (var i = 0; i < rs.length; i++) {
          var item = rs[i].split(",");
          var coordinates = [];
          if (item.length > maxLength) {
            maxLength = item.length;
          }
          for (j = 0; j < item.length; j += 2) {
            if (item.length === 1) {
              continue;
            }
            coordinates.push(
              proj4("EPSG:3857", "EPSG:4326", [item[j], item[j + 1]])
            );
            timeData.push({
              geometry: {
                type: "Point",
                coordinates: proj4("EPSG:3857", "EPSG:4326", [
                  item[j],
                  item[j + 1],
                ]),
              },
              count: 1,
              time: j,
            });
          }
          data.push({
            geometry: {
              type: "LineString",
              coordinates: coordinates,
            },
          });
        }
        // 构建对应的dataset
        var dataSet1 = new mapv.DataSet(data);
        // 设置对应的参数
        // https://github.com/huiyan-fe/mapv/blob/master/API.md
        var options = {
          context: "2d", //cesium必须设置画布为2d
          strokeStyle: "rgba(53,57,255,0.5)",
          coordType: "bd09mc",
          // globalCompositeOperation: 'lighter',
          shadowColor: "rgba(53,57,255,0.2)",
          shadowBlur: 3,
          lineWidth: 3.0,
          draw: "simple",
        };
        // 声明cesium的mapv图层并将其显示到三维球上
        var mapv1 = new CesiumZondy.Overlayer.MapvLayer(map, dataSet1, options);
        // 构建对应的dataset
        var dataSet2 = new mapv.DataSet(timeData);
        // https://github.com/huiyan-fe/mapv/blob/master/API.md
        var options = {
          context: "2d",
          fillStyle: "rgba(255, 250, 250, 0.2)",
          coordType: "bd09mc",
          globalCompositeOperation: "lighter",
          size: 1.5,
          animation: {
            stepsRange: {
              start: 0,
              end: 100,
            },
            trails: 3,
            duration: 5,
          },
          draw: "simple",
        };
        // 声明cesium的mapv图层并将其显示到三维球上
        var mapv2 = new CesiumZondy.Overlayer.MapvLayer(map, dataSet2, options);
      });
    }
  </script>
</body>

</html>